<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <title>shop</title>
    <link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
   <!--  <section class="shop-item">
        <div class="shop-info">
            <img src="images/1.jpg" alt="" class="shop-icon" />
            <p class="shop-name">名门花店 <br/> 02-18</p>
        </div>
        <div class="intro">
            <p>都是新到的鲜花哦，超级漂亮超级美丽，情人节的首选哦！快快来抢购！</p>
            <ul class="shop-imgs">
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
            </ul>
            <ul class="shop-btn">
                <li class="first">
                    <img src="images/like.png" alt="">
                    <p>315</p>
                </li>
                <li class="second">
                    <img src="images/like.png" alt="">
                    <p>32</p>
                </li>
            </ul>
        </div>
    </section> -->


</body>
<script type="text/javascript">
    var datas = [{
        img:"images/2.jpg",
        name:"T.K.S",
        date:"2016-03-02",
        intro:"都是新到的鲜花哦，超级漂亮超级美丽，情人节的首选哦！快快来抢购！",
        imgs:[
                "kinds/0.4.jpg",
                "kinds/0.1.jpg",
                "kinds/0.2.jpg",
                "kinds/0.5.jpg",
                "kinds/0.6.jpg",
                "kinds/0.7.jpg"
        ],
        num1:13,
        num2:5
    },{
        img:"images/3.jpg",
        name:"未萌小店",
        date:"2016-03-01",
        intro:"上新啦",
        imgs:[
            "kinds/0.9.jpg",
            "kinds/0.12.jpg",
            "kinds/bl1.jpg",
            "kinds/bl2.jpg",
            "kinds/1.4.jpg",
            "kinds/1.3.jpg"
        ],
        num1:3,
        num2:2
    },
        {
            img:"images/4.jpg",
            name:"小星星",
            date:"2016-03-02",
            intro:"么么哒",
            imgs:[
                "kinds/9.4.JPG",
                "kinds/9.1.JPG",
                "kinds/9.2.JPG",
                "kinds/9.5.JPG",
                "kinds/9.6.JPG",
                "kinds/9.7.JPG"
            ],
            num1:1,
            num2:0
        }
    ]
    function addItems(data){
        var tempFragment = document.createDocumentFragment();
        for(var i = 0;i<data.length;i++){
           var sec = createSection(data[i].img,data[i].name,data[i].date,data[i].intro,data[i].imgs,data[i].num1,data[i].num2)
            tempFragment.appendChild(sec);
        }
        document.getElementsByTagName("body")[0].appendChild(tempFragment)
    }
    function createSection(img,name,date,intro,imgs,num1,num2){
        var section = document.createElement("section");
        section.setAttribute("class","shop-item");
        var fDiv = document.createElement("div");
        fDiv.setAttribute("class","shop-info");
        var img1 = document.createElement("img");
        img1.setAttribute("src",img);
        img1.setAttribute("class","shop-icon");
        fDiv.appendChild(img1);
        var p = document.createElement("p");
        p.setAttribute("class","shop-name");
        p.innerHTML=name+'<br />'+date;
        fDiv.appendChild(p);
        section.appendChild(fDiv);
        console.log('add1')
//        第一个div
        section.appendChild(createSecDiv(intro,imgs,num1,num2));
        return section;
    }
    function addImgs(img){
        var imgNode = document.createElement('img');
        imgNode.setAttribute('src',img);

        console.log('add2')
        return (document.createElement('li').appendChild(imgNode))  ;
    }
    function createSecDiv(intro,imgs,num1,num2){
        var div =  document.createElement("div");
        div.setAttribute("class",'intro');
        var tp = document.createElement('p');
        tp.innerHTML=intro;
        div.appendChild(tp);
        var ul1 = document.createElement("ul");
        ul1.setAttribute('class','shop-imgs');
        for(var j=0;j<imgs.length;j++){
            var li1 = document.createElement("li");
            li1.appendChild(addImgs(imgs[j]))
            ul1.appendChild(li1);
        }
        div.appendChild(ul1);
        //ul1完了
        var ul2 = document.createElement("ul");
        ul2.setAttribute("class","shop-btn");
        ul2.innerHTML='<li class="first"><img src="images/like.png" alt=""><p>'
                +num2+'</p> </li><li class="second"><img src="images/like.png" alt=""><p>'+num1+'</p></li>';
        div.appendChild(ul2);
        return div;
    }

    window.onload=function(){
        addItems(datas);
    }

</script>
</html>